<template>
  <div class="father">
    <video data-v-73443695="" muted="muted" src="../../media/bg.mp4" loop="loop" autoplay="autoplay"
      class="video"></video>

    <div class="demo-loginFormData">
      <h1>{{ pageInfo.title }}</h1><br>

      <div>
        <!-- <svg class="icon" aria-hidden="true">
        <use xlink-href="#icon-iphone"></use>
      </svg> -->
      </div>
      <!-- 动态组件 -->
      <component :is="pageInfo.component"></component>
      <button @click="handleToggle" class="changlogin">{{ pageInfo.toggledes }}</button>
    </div>
  </div>
</template>



<script setup>
import commonLogin from '../../components/login/commonLogin.vue';
import smsLogin from '../../components/login/sms.vue';
import { ref, watchEffect, markRaw } from "vue"


// markRow将ref响应对象变成正常对象

// 声明页面数据

let pageInfo = ref({
  title: 'crm系统',//标题
  loginType: 'common',//登入类型
  toggledes: '手机登入', //描述信息
  component: markRaw(commonLogin)  //要切换的组件
})


// 点击切换登陆方式
let isCommonLogin = ref(true);

// 点击切换登陆方式
let handleToggle = () => {
  isCommonLogin.value = !isCommonLogin.value
  console.log('4665');

}

// 切换页面
watchEffect(() => {
  if (isCommonLogin.value) {
    pageInfo.value = {
      title: '常规登陆',//标题
      loginType: 'common',//登入类型
      toggledes: '手机登入', //描述信息
      component: markRaw(commonLogin) //要切换的组件
    }
  } else {
    // 短信登陆
    pageInfo.value = {
      title: '短信登陆',//标题
      loginType: 'common',//登入类型
      toggledes: '常规登入', //描述信息
      component: markRaw(smsLogin)  //要切换的组件

    }
  }
})
</script>



<style lang="scss">
// 定制组件，修改样式的思路
// 1.找到对应组件结构类名
// 2.重新编写样式，覆盖原本的

// 样式修改不成功原因
// 1.类名是否一样
// 2.权重问题 !important
// 3.深度选择器 嵌套层级较深 xx :deep(选择器) scope样式

.demo-loginFormData {
  // 最外围的框
  font-weight: 900;
  color: black;
  position: absolute;
  top: 20%;
  left: 40%;
  // bottom: 30px;
  border: 1px solid black;
  color: black !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(250, 248, 248,0.6);
  width: 300px;
  height: 400px;
  margin: 0 auto;

}

.username-form-item {

  // 用户
  .el-input {
    width: 240px;
  }
}

.password-form-item {

  // 密码
  .el-input {
    width: 240px;

  }
}

.capture-span {
  // 验证码右边
  width: 120px;
  background-color: white;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;

}

 .changlogin{
width: 120px;
margin: 0 auto;
background-color:white;
}
.capture-form-item {
  border-top-right-radius: 0;
  // 验证码
  .el-form-item__content {
    .el-input {
      width: 120px;
      .el-input__wrapper {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
      }
    }
  }
}

.video {
  // 视频
  z-index: 100vx;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.div {
  position: relative;
}
</style>
    
  
    